<template>
	<view class="pay-page">
		<u-navbar title="邀请码" :placeholder="true" :auto-back="true">
			<view class="u-nav-slot" slot="right">
				<text @click="add">+新增</text>
			</view>
		</u-navbar>
		<view class="invite">
			<view class="invite-item">
				<view class="item-info">
					<view class="item-title">
						邀请码
					</view>
					<view class="item-right">
						<view class="code">
							JHFDI2432HN
						</view>
						<view class="copy">
							复制
						</view>
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						支付宝费率
					</view>
					<view class="item-text">
						0.01
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						微信费率
					</view>
					<view class="item-text">
						0.01
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						过期时间
					</view>
					<view class="item-text">
						2024-10-24 09：13：59
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						注册人数
					</view>
					<view class="item-text">
						0
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						未激活
					</view>
					<view class="item-text">
						0
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						启用状态
					</view>
					<view class="item-text">
						<u-switch v-model="status" @change="handleType" asyncChange></u-switch>
					</view>
				</view>
				<view class="btn">
					<view class="btn-item edit-item" @click="edit">
						编辑
					</view>
					<view class="btn-item" @click="del">
						删除
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" @cancel="show = false" @confirm="confirm" :showCancelButton="true">
			<view class="dividend" v-if="type == 1">
				<view class="dividend-item">
					<view class="item-title">
						过期时间
					</view>
					<view class="time-text" @click="date_show = true">
						{{ formatDateTime(expire_time) }}
					</view>
				</view>
				<view class="dividend-item">
					<view class="item-title">
						支付宝汇率
					</view>
					<u-input type="text" placeholder="请输入支付宝汇率" border="none" v-model="pay_rate"></u-input>
				</view>
				<view class="dividend-item">
					<view class="item-title">
						微信汇率
					</view>
					<u-input type="text" placeholder="请输入微信汇率" border="none" v-model="vx_rate"></u-input>
				</view>
			</view>
			<view class="del" v-if="type == 2">
				<view class="del-tips">
					确认删除
				</view>
				<view class="del-text">
					JHFDI2432HN
				</view>
			</view>
			<view class="dividend" v-if="type == 3">
				<view class="dividend-item">
					<view class="item-title">
						过期时间
					</view>
					<view class="time-text" @click="date_show = true">
						<text v-if="new_time == ''">请输入过期时间</text>
						<text v-else>{{ formatDateTime(new_time) }}</text>
					</view>
				</view>
				<view class="dividend-item">
					<view class="item-title">
						支付宝汇率
					</view>
					<u-input type="text" placeholder="请输入支付宝汇率" border="none" v-model="pay_rate"></u-input>
				</view>
				<view class="dividend-item">
					<view class="item-title">
						微信汇率
					</view>
					<u-input type="text" placeholder="请输入微信汇率" border="none" v-model="vx_rate"></u-input>
				</view>
				<view class="dividend-item">
					<view class="item-title">
						可创下线数量
					</view>
					<u-input type="text" placeholder="请输入下线数量" border="none" v-model="vx_rate"></u-input>
				</view>
			</view>
		</u-modal>
		<u-datetime-picker :show="date_show" v-model="value" mode="date" @cancel="date_show = false"
			@confirm="confirmDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false,
				type: 1,
				show: false,
				title: '',
				expire_time: '',
				pay_rate: '',
				vx_rate: '',
				date_show: false,
				value: Number(new Date()),
				new_time: ''
			}
		},
		methods: {
			handleType(e) {
				let app = this
				uni.showModal({
					title: '提醒',
					content: e == true ? '是否开启邀请码？' : '是否关闭邀请码？',
					success: function(res) {
						if (res.confirm) {
							app.status = e
						} else if (res.cancel) {
							app.status = app.status
						}
					}
				})
			},
			confirm() {
				this.show = false
			},
			edit() {
				this.type = 1
				this.show = true
				this.title = '编辑'
			},
			del() {
				this.type = 2
				this.show = true
				this.title = '删除'
			},
			confirmDate(e) {
				if (this.type == 2) {
					this.expire_time = e.value
				}
				if (this.type == 3) {
					this.new_time = e.value
				}
				this.date_show = false
			},
			formatDateTime(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			add() {
				this.type = 3
				this.show = true
				this.title = '新增邀请码'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-page {
		min-height: 100vh;
		background-image: url('../../../static/home/page-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.u-nav-slot {
			color: rgb(41, 121, 255);
			font-size: 26rpx;
		}

		.dividend {
			.bank {
				color: #999;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
			}

			.dividend-title {
				font-size: 30rpx;
			}

			.dividend-tips {
				color: red;
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.dividend-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				text-align: left;

				.item-title {
					width: 200rpx;
					font-size: 26rpx;
					color: #999;
				}

				.time-text {
					width: 300rpx;
					font-size: 26rpx;
					color: #999;
					text-align: left;
				}
			}

		}

		.del {
			font-weight: bold;
			font-size: 28rpx;
			text-align: center;

			.del-tips {
				color: #ff0000;
			}

			.del-text {
				color: #000;
				margin-top: 20rpx;
			}
		}

		.invite {
			padding: 30rpx;

			.invite-item {
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.item-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.item-title {
						width: 200rpx;
						font-size: 28rpx;
						color: #000;
						font-weight: bold;
					}

					.item-text {
						font-size: 28rpx;
						color: #999;
					}

					.item-right {
						display: flex;
						align-items: center;

						.code {
							font-size: 26rpx;
							color: #999;
						}

						.copy {
							padding: 10rpx 20rpx;
							border-radius: 10rpx;
							font-size: 24rpx;
							background-color: rgb(41, 121, 255);
							color: #fff;
							margin-left: 30rpx;
						}
					}
				}

				.btn {
					display: flex;
					justify-content: space-around;

					.btn-item {
						font-size: 26rpx;
						font-weight: bold;
						color: #ff0000;
					}

					.edit-item {
						color: rgb(41, 121, 255);
					}
				}
			}
		}
	}
</style>